<template>
    <el-dialog v-model="state.isShowDialog" width="996px">
        <UserSelector ref="userSelectorRef" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog" size="default">{{$t('message.userOperation.cancel')}}</el-button>
                <el-button type="primary" @click="submit" size="default">{{$t('message.userOperation.submit')}}</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import {ref, defineAsyncComponent,reactive} from "vue";
import { feature } from "/@/utils/axios-utils";
import { ElMessage } from "element-plus";
import roleApi from '/@/api-services/apis/system/roleApi';
const UserSelector = defineAsyncComponent(() => import('/@/views/system/user/component/userSelector.vue'));
// 定义变量内容
const userSelectorRef = ref();
const state = reactive({
    isShowDialog:false,
    roleId:0,
})

const openDialog=async(row:any)=>{
    state.isShowDialog=true;
    state.roleId=row.id;
    queryRoleUser();
}
//查询角色已授权用户
const queryRoleUser=async ()=>{
    var selectedList=[] as any;
    var res=await roleApi.getOwnUser({id:state.roleId});
    selectedList=res.data.data;
    userSelectorRef.value.initSelectedUser(selectedList);
}
const closeDialog=()=>{
    state.isShowDialog=false;
};
const submit=async()=>{
    var selectedUser= userSelectorRef.value.getSelectedUser();
    //var userIdList=[] as Array<number>
    //将用户id组成数组
    var userIdList=selectedUser.map((it:any)=>it.id);
    const [err]=await feature(roleApi.grantRoleUsers({id:state.roleId,userList:userIdList}));
    if(err){
			ElMessage.error(err.message)
    }
    else{
        closeDialog();
    }
};
// 导出对象
defineExpose({ openDialog });
</script>